<template>
    <view class="shop-item">
        <view class="title-box">
            <text class="city-name">{{ item.CityName ? item.CityName : "未设置" }}</text>
        </view>
        <view class="shop-item-select">
            <view class="select-item touch" v-for="(shopItem, index) in item.List" @click="selectFn(shopItem)">
                <image class="shop-logo" src="/static/logo.png"></image>
                <view class="shop-info">
                    <text class="shop-name">{{ shopItem.Name }}</text>
                    <text class="shop-address">{{ shopItem.Address ? shopItem.Address : "未设置地址" }}</text>
                </view>
            </view>
            <uni-load-more
                status="noMore"
                v-if="!item.List || item.List < 1"
                :contentText="{ contentnomore: '暂无数据' }"></uni-load-more>
        </view>
    </view>
</template>

<script>
import searchBarCity from "@/components/common/search-bar-city.vue"
export default {
    components: {
        searchBarCity,
    },
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        selectFn(item) {
            this.$emit("selectFn", item)
        },
    },
}
</script>

<style lang="scss">
.shop-item {
    background: $color-white;
    margin-bottom: $app-page-padding;
    padding: $app-page-padding $app-page-padding 0;
    display: flex;
    flex-direction: column;
    .title-box {
        margin-bottom: $app-page-padding;
        .city-name {
            font-weight: bold;
            font-size: $font-size-32;
        }
    }
    .shop-item-select {
        // padding: $app-page-padding 0;
    }
}
.select-item {
    display: flex;
    margin-bottom: 40rpx;
    .shop-logo {
        width: 56rpx;
        height: 56rpx;
        margin-right: 20rpx;
    }
    .shop-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .shop-name {
            font-size: $font-size-32;
            font-weight: bold;
        }
        .shop-address {
            margin-top: 12rpx;
            color: $app-color-text-tip;
            font-size: $font-size-26;
        }
    }
}
</style>
